<template>
  <page-meta :root-font-size="fontSize + 'px'"></page-meta>

  <view class="page-container">
    <CustomHeader :title="pageModule.title" :border-line="false" />

    <scroll-view
      v-show="pageModule.pageData.length"
      class="scroll-container"
      :style="{ top: height }"
      :scroll-into-view="pageModule.scrollToLocation"
      scroll-with-animation
      scroll-y>
      <view class="scroll-content">
        <view class="answer-list">
          <template v-for="(parent, index) in pageModule.pageData" :key="parent.topic_id">
            <view class="item">
              <view class="title">
                <view class="number" :id="'scroll' + parent.topic_id">{{ index + 1 }}</view>
                <text class="text">{{ parent.title }}</text>
              </view>
              <view class="option">
                <template v-for="(child) in parent.options" :key="child.op_idx">
                  <view :class="['item', parent!.u_answer && pageModule.getOptionsClass(parent, child.op_idx)]">
                    <text class="number">{{ child.op_idx }}</text>
                    <text class="text">{{ child.option }}</text>
                  </view>
                </template>
              </view>
              <view class="analysis">
                <text>{{ parent!.analysis }}</text>
              </view>
            </view>
          </template>
        </view>
        <view class="original-container">
          <view class="title">
            <text>听力原文</text>
          </view>
          <text class="text">{{ pageModule.originalText }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
  import { ref, reactive } from "vue";
  import { rootFontSize } from "@/utils/util";
  import CustomHeader from "@/components/customHeader.vue";
  import API from "@/api";

  const props = defineProps({
    section_id: {
      type: [String, Number]
    },
    topic_id: {
      type: [String, Number]
    }
  });

  // 公用常量
  const fontSize = rootFontSize();

  const height = ref(getApp().globalData!.pageTop);

  /**
   * 页面数据模块
   */
  const pageModule = reactive({
    pageData: [] as any[],
    scrollToLocation: '',
    title: '随课自检',
    originalText: '',
    async init(callback?: Function) {
      try {
        const resultData: any = await API.getCourseAnswerAnalysis({ section_id: props.section_id, topic_id: props.topic_id });
        resultData?.title && (this.title = resultData.title);
        resultData?.content && (this.originalText = resultData.content);
        this.pageData = resultData?.analysis || [];
      } catch (e) {
        console.error(e);
      } finally {
        callback && callback();
      }
    },
    getOptionsClass(parent: any, optionAnswer: string) {
      if (parent.answer == parent.u_answer && parent.u_answer == optionAnswer) return 'success';
      if (parent.answer == optionAnswer) return 'success';
      if (parent.u_answer == optionAnswer) return 'error';
      return '';
    }
  });

  (() => {
    pageModule.init(() => {
      pageModule.scrollToLocation = 'scroll' + props.topic_id;
    });
  })();
</script>

<style scoped lang="scss">
  @mixin fontStyle($size) {
    font-size: #{ $size }rem;
    font-family: xiaolai;
    color: $uni-text-color;
  }

  .page-container {
    width: 100vw;
    height: 100vh;
    background-color: #fff;

    .scroll-container {
      position: absolute;
      width: 37.5rem;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);

      .scroll-content {
        padding: 2rem 20px 0 20px;
      }
    }

    .answer-list {

      > .item {
        border-bottom: 1px dashed #DCC1B7;
        padding-bottom: 2rem;
        margin-bottom: 2rem;

        .title {
          @include fontStyle(1.4);
          display: flex;
          margin-bottom: 1.4rem;

          .number {
            height: 2.4rem;
            width: 2.4rem;
            line-height: 2.4rem;
            text-align: center;
            background-color: #F2D096;
            border-radius: 50%;
            margin-right: 0.8rem;
          }

          .text {
            flex: 1;
            font-size: 1.7rem;
          }
        }

        .analysis {
          @include fontStyle(1.5);
          color: $uni-text-color-grey;
          background-color: #FFF9EF;
          border: 1px solid #F9EEDC;
          padding: 1.5rem;
          border-radius: 1rem;
          margin-top: 1.5rem;

          .stress {
            color: #C37C19;
          }
        }
      }

      .option {

        .item {
          border: $uni-bg-color-speak solid 2px;
          min-height: 5.4rem;
          border-radius: 1.5rem;
          display: flex;
          align-items: center;
          padding: 1.25rem 1.5rem;
          background-color: #FFF9EF;
          box-sizing: border-box;

          &:nth-child(n + 2) {
            margin-top: 0.8rem;
          }

          .number {
            @include fontStyle(2.6);
            font-family: baloo;
            margin-right: 2.4rem;
          }

          .text {
            @include fontStyle(1.5);
            word-break: break-all;
            word-wrap: break-word;
          }

          &.error {
            border-color: $uni-text-color;
            background-color: #fcc5b0;
          }

          &.success {
            border-color: $uni-text-color;
            background-color: #e7e9c1;
          }
        }
      }
    }

    .original-container {
      @include fontStyle(1.4);
      padding-bottom: 2rem;

      .title {
        height: 2.4rem;
        width: 8rem;
        text-align: center;
        line-height: 2.4rem;
        border-radius: 2rem;
        background-color: #F2D096;
        margin-bottom: 1.4rem;
      }

      .text {
        font-size: 1.7rem;
      }
    }
  }
</style>
